<template>
 <header class="todo-header">
    <h2>TodoList</h2>
    <div class="add-todo">
      <input v-model.trim="content"  type="text" placeholder="请输入待办事项..." class="input" @keyup.enter="handleClick">
      <button class="btn" @click="handleClick">添加</button>
    </div>
 </header>
</template>

<script setup>
import {ref} from 'vue'
const content = ref('')
const emit = defineEmits(['addTodo'])
const handleClick = ()=>{
    //1.构造一个对象
    const todo={
        id:Date.now(),
        content:content.value,
        done:false,
    }
    //2.将对象传给App组件
    emit('addTodo',todo)
    //3.清空输入框
    content.value=''
}
</script>

<style scoped>
.todo-header{
    background-color: #0b87ff;
    text-align: center;
    padding: 5px 0 10px;
    color: #f0f8ff;
}
.add-todo{
    margin-top: 10px;
    display: flex;
    gap: 5px;
    justify-content: center;
}
.todo-header .input{
      width: 300px;
    height: 30px;
    padding: 0 10px;
    border-radius: 3px;
    outline: none;
    border: solid 1px white;
}
.todo-header .btn{
    display: inline-block;
    width: 80px;
    height: 30px;
    background-color: #eee;
    color: #0b87ff;
    line-height: 30px;
    border: none;
    border-radius: 3px;
}
.todo-header .btn:hover{
      cursor: pointer;
    background-color: #fff;
    color: #ff6700;
}
</style>